<template>
  <div class="wrap-box">
    <div class="wrap">
    <div
      v-for="item in gameArr"
      class="scroll-item div6"
      :style="{ backgroundImage: 'url(' + item.image + ')' }"
      :key="item.id"
      @click="goGame(item.id)"
    >
      <div class="big">
        <div class="text">{{ item.game_name }}</div>
      </div>
    </div>
  </div>
  </div>
</template>
  
  <script setup lang="ts">
import { gameList } from "./game-catalog.service";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const gameArr = ref([]);

const goGame = (id: string) => {
  router.push({ path: "/game", query: { id: id } });
};

const getData = async () => {
  const res = await gameList();
  if (res.status === 0) {
    gameArr.value = res.data;
    console.log(gameArr.value, res, "value");
  }
  console.log(res, "resssss");
};

getData();
</script>
  
<style scoped lang="scss">
.wrap-box{
  background: #000;
}
.wrap {
  margin: 0 auto;
  max-width: 1440px;
  background: #000;
  padding: 50px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.div6 {
  border: 5px solid;
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 5px);
  animation: div6Ani 3s infinite linear;
  filter: hue-rotate(360deg);
}
@keyframes div6Ani {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rorate(360deg);
  }
}

.scroll-item {
  cursor: pointer;
  margin-bottom: 30px;
  display: inline-block;
  width: 290px; /* 与 itemWidth 保持一致 */
  height: 290px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px; /* 如果需要的话，添加间距 */
  background-size: cover;
}
.big {
  position: relative;
  height: 100%;
}
.text {
  position: absolute;
  bottom: 30px;
  color: #fff;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  left: 0;
  right: 0;
}
</style>